<template>
	<view class="total" >
		
			<view class="head">
				<view style="display: flex;align-items: center;">
					<view @click="selectAll(items_list.length)" :class="select_all_class['check']" >
						√
					</view>
					<span style="color: black;margin-left: 20rpx;">全选</span>
				</view>
				
				<view style="width: 120rpx;display: flex;align-items: center;">
					<image src="../../../../static/清空.png" style="height: 40rpx;width: 40rpx;"></image>
					<span @click="clear()" style="font-size: 32rpx;color: gray;" >清空</span>
				</view>
			</view>
		
		
		<view class="main" >
			<view  v-for="( item , index ) in items_list" :key="index">
				
				<view class="item">
					<view :class="check_obj['check'+index]" @click="change(index)" >
						√
					</view>
					<view style="display: flex;flex-direction: column;align-items: center;width: 500rpx;margin-top: 40rpx ;">
						<view style="display: flex;align-items: center;height: 200rpx;">
							<image :src="item.image_name" style="height: 200rpx;width: 175rpx;"></image>
							<view>
								<h4 style="font-weight: 700;color: black;">{{item.name}}</h4>
								<span style="font-size: 30rpx;color: darkgray">{{item.detail}}</span>
								<view style="display: flex;">
									<view style="display: flex;"><span style="font-weight: bold;color: black;">￥{{item.price}}</span></view>
								</view>
							</view>
						</view>
					</view>
					<view style="display: flex;justify-content: space-around;width: 200rpx;">
						<span @click="sub(index)" style="line-height:46rpx;font-weight:600;text-align:center;font-size:50rpx;width: 50rpx;height: 50rpx;border-radius: 100rpx;color: green;border: 7rpx solid green;background-color: inherit;">-</span>
						<span style="color: black;">{{item.num}}</span>
						<span @click="add(index)" style="line-height:46rpx;font-weight:600;text-align:center;font-size:44rpx;width: 50rpx;height: 50rpx;border-radius: 100rpx;color: white;border: 7rpx solid green;background-color: green;">+</span>
					</view>
					<input v-show="false" v-model="a" value="index"></input>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items_list:[],
				check_class:[],
				check_obj:{},
				select_all_class:{}
			}
		},

		mounted() {
			let t=this;
			uni.request({
				url:"http://localhost:3000/getItems",
				success(data) {
					t.items_list=[]
					t.$set(t.select_all_class,"check","check")
					for(let i=0;i<data.data.length;i++){
						t.items_list.push(data.data[i]);
						t.check_class.push({uncheck:false,check:true})
						t.$set(t.check_obj,"check"+i,"check")
					}
					
				}
			})
		},
		
		watch:{
			deep:true,
			check_obj:{
				handler(n,o){
					
				}
			}
		},
		methods: {
			init(){
				let t=this;
				uni.request({
					url:"http://localhost:3000/getItems",
					success(data) {
						
						t.items_list=[]
						t.$set(t.select_all_class,"check","check")
						for(let i=0;i<data.data.length;i++){
							t.items_list.push(data.data[i]);
							t.check_class.push({uncheck:false,check:true})
							t.$set(t.check_obj,"check"+i,"check")

						}
						
					}
				})
			},
			sub(index){
				
				
			},
			add(index){
				
			},
			getItems(){
				let t=this;
				uni.request({
					url:"http://localhost:3000/getItems",
					success(data) {
						console.log(data)
						t.items_list=[]
						for(let i=0;i<data.data.length;i++){
							
							t.items_list.push(data.data[i])
							
						}
						
					}
				})
			},
			change(index){

			},
			selectAll(length){
				
			},
			clear(){
				
			}
			

		}
	}
</script>

<style scoped>
.total{
	width: 750rpx;
	border-radius: 30rpx;
	display: flex;
	flex-direction: column;
	padding-bottom: 280rpx;
	overflow: scroll;
	background-color: white;
	max-height: 800rpx;
}
.head{
	color: #e3e3e3;
	background-color: #e3e3e3;
	display: flex;
	justify-content: space-between;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	height: 90rpx;
	padding: 10rpx;
	align-items: center;
}
.main{
	padding: 15rpx;
	background-color: white;
	display: flex;
	flex-direction: column;
	overflow: scroll;
}
.item{
	display: flex;
	align-items: center;
	color: white;
}
.check{
	color: white;
	background-color: green;
	width: 36rpx;
	height: 36rpx;
	border-radius: 100rpx;
	border: 1rpx solid green;
	font-size: 30rpx;
	text-align: center;
}
.uncheck{
	font-size: 30rpx;
	text-align: center;
	color: inherit;
	background-color: inherit;
	width: 36rpx;
	height: 36rpx;
	border-radius: 100rpx;
	border: 1rpx solid gray;
}

</style>
